<template>
  <div class="amt-unit-select">
    <span class="amt-unit-title">单位</span>
    <vxe-select ref="selectRef"
      style="width: 80px; height: 32px;"
      :="$attrs"
      size="medium"
      v-model="selectValue"
      :options="selectOptions"
      @change="change">
    </vxe-select>
  </div>
</template>

<script setup>
import { reactive, ref, watchEffect } from 'vue'

const emits = defineEmits(['update:modelValue', 'change']);

const props = defineProps({
  modelValue: { type: [String, Number] }
})

const selectValue = ref(props.modelValue)
const selectOptions = reactive([
  {value: 1, label: '元', echo: '元', tagType: ''},
  {value: 2, label: '万元', echo: '万元', tagType: ''},
  {value: 3, label: '亿元', echo: '亿元', tagType: ''},
])

watchEffect(() => {
	selectValue.value = props.modelValue;
});

const change = ({ value }) => {
  emits('change', value);
	emits('update:modelValue', value);
}
</script>

<style lang="scss" scoped>
.amt-unit-title {
  height: 32px;
  line-height: 32px;
  padding: 0 8px 0 0;
  font-size: 14px;
  color: #606266;
  box-sizing: border-box;
}
</style>